<template>
    <div class="comment">
        <div v-for="(item,index) in commentList" :key="index">
        <div class="commentOne">
            <div>
                <img v-if="item.userinfo.user_img!=null" :src="item.userinfo.user_img" alt="">
                <img v-else src="~assets/img/default_img.jpg" alt="">
            </div>
            <div class="contentName">
                <p>
                    <span v-if="item.userinfo">{{item.userinfo.name}}</span>
                    <span>{{item.comment_date}}</span>
                </p>
                <div class="contentText">
                    {{item.comment_content}}
                    <span class="huifu" @click="postBack(item.comment_id)">回复</span>
                </div>
            </div>
            </div>
            <div class="two">
                <comment-two @postCommentMores="postBack" @postCommentMoreBack="postBack" :commentTwoData="item.child"></comment-two>
            </div>
        </div>
    </div>
</template>

<script>
    import CommentTwo from 'components/common/Detail/commentTwo'
    export default {
        name: "comment",
        components: {CommentTwo},
        data(){
            return{
                commentList:null
            }
        },
        methods:{
            async getComment(){
                const {data:res} = await this.$http.get(`/comment/${this.$route.params.id}`)
                if (res){
                    this.$emit('getCommentNum',res.length)
                }
                this.commentList = this.changeCommentData(res)
            },
            changeCommentData(data){
                function fn(temp) {
                    const arr = []
                    for (var i = 0; i<data.length;i++){
                        if (data[i].parent_id == temp) {
                            arr.push(data[i])
                            data[i].child = fn(data[i].comment_id)
                        }
                    }
                    return arr
                }
                return fn(null)
            },
            postBack(id){
                this.$emit('postBacks',id)
            },
        },
        created() {
            this.getComment()
        }
    }
</script>

<style lang="less">
    .comment{
        margin: -3.871vw 0 0 3.871vw;
        >div{
            border-bottom: 0.323vw solid #e7e7e7;
            padding-bottom: 3.871vw;
            margin-bottom: 6.452vw;
        }
        .commentOne{
            display: flex;

            img{
                border-radius: 50%;
                width: 11.29vw;
                height: 11.29vw;
            }
            .contentName{
                flex: 1;
                padding: 0 3.226vw;
                p{
                    margin: 0;
                    align-items: flex-start;
                    font-size: 4.516vw;
                    color: #757575;
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 2.581vw;
                }
                .contentText{
                    font-size: 4.194vw;
                    position: relative;
                    .huifu{
                        color: red;
                        position: absolute;
                        right: 1.613vw;
                    }
                    .huifu2{
                        color: red;
                        position: absolute;
                        right: -1.613vw;
                    }
                }
            }

        }
    }
    .two{
        padding: 0 20px 0 30px;
    }

</style>